<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <!-- <el-form-item label="id:" prop="id" v-show="false">
                <el-input v-model="form.id" disabled />
            </el-form-item> -->
            <el-form-item label="选择月份:" prop="monthold">
                <el-date-picker
                    v-model="form.monthold"
                    align="right"
                    type="month"
                    placeholder="选择月份"
                    @change="change_time"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="采购成本:" prop="brand_cost">
                <el-input v-model="form.brand_cost" style="max-width: 200px;margin-right: 10px;"  placeholder="请先选择月份" clearable />
                <span>(请填写美金)</span>
                <el-button type="primary" @click="change_brand_cost">所有SKU都用这个采购成本</el-button>
            </el-form-item>

            <el-row>
                <el-col :span="12">
                    <template>
                        <div>
                            <el-table
                                :data="datelist"
                                border
                                style="width: 100%"
                                max-height="450"
                                highlight-current-row ref="mytb">
                                <el-table-column label="每月采购历史">
                                    <el-table-column
                                        prop="month"
                                        label="日期"
                                        align="center">
                                    </el-table-column>
                                    <el-table-column
                                        prop="brand_cost"
                                        label="采购成本"
                                        align="center">
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </div>
                    </template>
                </el-col>
                <el-col :span="12" v-loading="loading">
                        <template>
                            <div>
                                <el-table
                                    :data="sku_list"
                                    border
                                    style="width: 100%"
                                    max-height="450"
                                    highlight-current-row ref="mytb">
                                    <el-table-column :label="label_sku">
                                        <el-table-column
                                            prop="sku"
                                            label="SKU"
                                            align="center">
                                        </el-table-column>
                                        <el-table-column label="采购成本" width="" align="center">
                                            <template slot-scope="scope">
                                                <span>{{ scope.row.price }}</span>   
                                                <el-input v-model="scope.row.price"></el-input>            
                                            </template>    
                                        </el-table-column>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </template>
                </el-col>
            </el-row>

            <el-form-item>
                <el-button type="primary" @click="submitForm">确认 </el-button>
                <el-button type="warning" @click="cancel">取消 </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
name: 'EditForm',
props: {
    findFormData: {
        type: Object,
        default: {}
    },
    editFormParams: {
        type: Object,
        default: {}
    },
    // 表单是否禁用
    disabled: {
        type: Boolean,
        default: false,
    },
    
},
data() {
    return {
        loading: false,
        // 编辑表单验证规则
        rules: {
    
        },
        pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
            shortcuts: [{
                text: '今天',
                onClick(picker) {
                picker.$emit('pick', new Date());
                }
            }, {
                text: '昨天',
                onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
                }
            }, {
                text: '一周前',
                onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
                }
            }]
        },
        form: { 
            monthold:'',
            month:'',
            brand_cost:'',
            product_id:0,
        },
        sku_list:[],
        post_month:'',
        label_sku:'SKU列表',
        datelist:[],

    }
},
watch: {
    findFormData: {
        handler(nval) {
            if (JSON.stringify(nval) != '{}') {
                this.$nextTick(() => {
                    this.form.product_id = nval.product_id;
                    this.sku_list = nval.sku_list;
                    this.datelist = nval.data;
                })
            }
        },
        immediate: true,
        deep: false,
    },
    
},
methods: {
    // 取消按钮
    cancel() {
        this.$emit('editFormCancel')
    },

    submitForm() { 
        if(this.form.brand_cost < 0.001 || this.form.brand_cost == 0 || this.form.brand_cost == ''){
                this.$message.error('请填写采购成本');
                return false;
        }
        if(this.post_month == ''){
                this.$message.error('请填写月份');
        }else{
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.form.sku = this.sku_list;
                    this.form.month = this.post_month;
                    this.$emit('submitForm', this.form)
                }
            })
        }
        
    },

    // 表单重置
    reset() {
        this.resetForm('form')
    },

    async change_time(val) {
        this.post_month = Math.round(val.getTime())/1000;
        let response = await this.request.post('/admin/output/add_purchaseprice2', { 
            product_id: this.form.product_id,
            month: this.post_month
        })
        this.sku_list = response.sku_list;
    },
    async change_brand_cost(val) {
        this.loading = true;
        // if(this.sku_list.length >= 1){
            let response = await this.request.post('/admin/output/add_purchaseprice3', { 
                sku_list: this.sku_list,
                brand_cost: this.form.brand_cost
            })
            this.sku_list = response.data;
        // }
        this.loading = false;
    },

}
}
</script>

<style lang="scss" scoped>
.el-table {
    // 默认情况下，即没有选中某一行时，只显示span
    span {
        display: block;
    }
    .el-input {
        display: none;
    }
    .el-select {
        display: none;
    }
  // 当点击某一行时，对应的行会添加current-row类，则内部的新的样式会生效
    .current-row {
        span {
        display: none;
        }
        .el-input {
            display: block;
        }
        .el-select {
            display: block;
        }
    }
}
</style>
